<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /*p{*/
            /*background: #02ff00;*/
        /*}*/

        /*后代选择器*/
        /*body p{*/
            /*background: red;*/
        /*}*/
        /*子选择器*/
        /*body>p{*/
            /*background: #3cbda6;*/
        /*}*/

        /*相邻兄弟选择器： 只有一个，相邻（向下） */
        /*.active + p{*/
            /*background: #a13d30;*/
        /*}*/

        /*通用兄弟选择器，当前选中元素的向下的所有兄弟元素*/
        .active~p{
            background: #02ff00;
        }

    </style>

</head>
<body>

    <p>p0</p>
    <p class="active">p1</p>
    <p>p2</p>
    <p>p3</p>
    <ul>
        <li>
            <p>p4</p>
        </li>
        <li>
            <p>p5</p>
        </li>
        <li>
            <p>p6</p>
        </li>
    </ul>
    <p>p7</p>
    <p>p8</p>


</body>
</html>